<template>
  <div>
     <div class="load" v-if="loading">loading.....</div>
     <location-header :cities="cities"></location-header>
     <location-list :letter="letter" :cities="cities" :hotCities="hotCities"></location-list>
     <location-alphabet @change="handleLetterChange" :alphabetList="alphabetList"></location-alphabet>
  </div>
</template>

<script>
import axios from 'axios'
import locationHeader from './components/locationHeader'
import locationList from './components/locationList'
import locationAlphabet from './components/locationAlphabet'

export default {
  name: 'Location',
  data(){
    return{
      letter:'',
      alphabetList:[],    //根据res 打印的结果，定义空的数据类型
      cities:{},
      hotCities:[],
      loading:true
    }
  },
  components:{
      locationHeader,
      locationList,
      locationAlphabet
  },
  methods:{
     handleLetterChange(letter){
        this.letter = letter
     },
     getLocationData(){  //请求函数
        axios.get("/api/city.json")
           .then(this.getLocationDataSuss)  //请求成功处理函数
     },
     getLocationDataSuss(res){
           //console.log(res)    //打印数据，判断数据类型
           res = res.data      //保存数据到本地
           if(res.data){       //对数据进行判断保存，要再data中先定义容器
              this.loading = false //数据没加载出来之前是加载中的一个样式，加载完毕关闭就好
              const data = res.data
              this.alphabetList = data.alphabetList
              this.cities = data.cities
              this.hotCities = data.hotCities
           }

     }
  },
  mounted(){
    this.getLocationData()
  }
}
</script>

<style lang="stylus"  scoped>
    .load
      position:absolute
      top:7rem
      left:3.5rem
      z-index:1011
      width:1.8rem
      height:.5rem
      opacity:.3
      background:#000
      color:#fff
      text-align:center
</style>